<ng-form name="secretForm" class="create-secret-form">
  <div ng-if="!type" class="form-group mar-top-lg">
    <label for="secret-type">Secret Type</label>
    <ui-select input-id="secret-type" required ng-model="newSecret.type" search-enabled="false" ng-change="newSecret.authType = secretAuthTypeMap[newSecret.type].authTypes[0].id">
      <ui-select-match>{{$select.selected | upperFirst}} Secret</ui-select-match>
      <ui-select-choices repeat="type in secretTypes">
        {{type | upperFirst}} Secret
      </ui-select-choices>
    </ui-select>
  </div>

  <div ng-if="newSecret.type">
    <div class="form-group">
      <label for="secret-name" class="required">Secret Name</label>
        <span ng-class="{'has-error': nameTaken || (secretForm.name.$invalid && secretForm.name.$touched)}">
          <input class="form-control"
            id="secret-name"
            name="name"
            ng-model="newSecret.data.secretName"
            type="text"
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false"
            aria-describedby="secret-name-help"
            ng-pattern="nameValidation.pattern"
            ng-maxlength="nameValidation.maxlength"
            ng-change="nameChanged()"
            required>
        </span>
        <div class="has-error" ng-show="nameTaken">
          <span class="help-block">
            This name is already in use. Please choose a different name.
          </span>
        </div>
        <div class="has-error" ng-show="secretForm.name.$invalid">
          <div ng-show="secretForm.name.$error.pattern && secretForm.name.$touched" class="help-block">
            {{nameValidation.description}}
          </div>
          <div ng-show="secretForm.name.$error.required && secretForm.name.$touched" class="help-block">
            Name is required.
          </div>
          <div ng-show="secretForm.name.$error.maxlength && secretForm.name.$touched" class="help-block">
            Can't be longer than {{nameValidation.maxlength}} characters.
          </div>
        </div>
        <div class="help-block" id="secret-name-help">
          Unique name of the new secret.
        </div>
    </div>

    <div ng-if="newSecret.type == 'webhook'">
      <div class="form-group">
        <label for="webhook-secret-key" class="required">Webhook Secret Key</label>
        <div class="input-group" ng-class="{ 'has-error': secretForm.webhookSecretKey.$invalid && secretForm.webhookSecretKey.$touched}">
          <input class="form-control"
            id="webhook-secret-key"
            name="webhookSecretKey"
            ng-model="newSecret.data.webhookSecretKey"
            ng-pattern="secretReferenceValidation.pattern"
            ng-minlength="secretReferenceValidation.minLength"
            type="text"
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false"
            aria-describedby="webhook-secret-key-help"
            required="true">
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="generateWebhookSecretKey()">Generate</button>
          </span>
        </div>
        <div class="help-block" id="secret-name-help">
          Value of the secret will be supplied when invoking the webhook.
          <a ng-href="{{'webhooks' | helpLink}}" target="_blank"><span class="learn-more-inline">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></span></a>
        </div>
        <div class="has-error" ng-show="secretForm.webhookSecretKey.$error.pattern && secretForm.webhookSecretKey.$touched">
          <span class="help-block">
            {{secretReferenceValidation.description}}
          </span>
        </div>
        <div class="has-error" ng-show="secretForm.webhookSecretKey.$error.minlength && secretForm.webhookSecretKey.$touched">
          <span class="help-block">
            The key must have at least {{secretReferenceValidation.minLength}} characters.
          </span>
        </div>
      </div>
    </div>

    <div ng-if="newSecret.type === 'source' || newSecret.type === 'image'">
      <div class="form-group">
        <label for="authentification-type">Authentication Type</label>
        <ui-select required input-id="authentification-type" ng-model="newSecret.authType" search-enabled="false">
          <ui-select-match>{{$select.selected.label}}</ui-select-match>
          <ui-select-choices repeat="type.id as type in secretAuthTypeMap[newSecret.type].authTypes">
            {{type.label}}
          </ui-select-choices>
        </ui-select>
      </div>

      <div ng-if="newSecret.authType === 'kubernetes.io/basic-auth'">
        <div class="form-group">
          <label for="username">Username</label>
          <input class="form-control"
            id="username"
            name="username"
            ng-model="newSecret.data.username"
            type="text"
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false"
            aria-describedby="username-help">
          <div class="help-block" id="username-help">
            Optional username for Git authentication.
          </div>
        </div>

        <div class="form-group" ng-class="{ 'has-error' : secretForm.passwordToken.$invalid && secretForm.passwordToken.$touched }">
          <label ng-class="{ required: !add.cacert && !add.gitconfig }" for="password-token">Password or Token</label>
          <input class="form-control"
            id="password-token"
            name="passwordToken"
            ng-model="newSecret.data.passwordToken"
            autocorrect="off"
            autocapitalize="none"
            spellcheck="false"
            aria-describedby="password-token-help"
            type="password"
            ng-required="!add.cacert && !add.gitconfig">
        </div>
        <div class="has-error" ng-show="secretForm.passwordToken.$error.required && secretForm.passwordToken.$touched">
          <div class="help-block">
            Password or token is required.
          </div>
        </div>
        <div class="help-block" id="password-token-help">
          Password or token for Git authentication. Required if a ca.crt or .gitconfig file is not specified.
        </div>

        <div class="form-group">
          <div class="checkbox">
            <label>
              <input type="checkbox" ng-model="add.cacert">
              Use a custom ca.crt file
            </label>
          </div>
        </div>
        <div class="form-group" ng-if="add.cacert" id="cacert">
          <label class="required" for="cacert">CA Certificate File</label>
          <osc-file-input
            id="cacert-file-input"
            model="newSecret.data.cacert"
            drop-zone-id="cacert"
            help-text="Upload your ca.crt file."
            required="true"></osc-file-input>
          <div ui-ace="{
            mode: 'txt',
            theme: 'eclipse',
            rendererOptions: {
              fadeFoldWidgets: true,
              showPrintMargin: false
            }
          }" ng-model="newSecret.data.cacert" class="create-secret-editor ace-bordered" id="cacert-editor" required></div>
        </div>


      </div>

      <div ng-if="newSecret.authType === 'kubernetes.io/ssh-auth'">
        <div class="form-group" id="private-key">
          <label for="privateKey" class="required">SSH Private Key</label>
          <osc-file-input
            id="private-key-file-input"
            model="newSecret.data.privateKey"
            drop-zone-id="private-key"
            help-text="Upload your private SSH key file."></osc-file-input>
          <div ui-ace="{
            theme: 'eclipse',
            rendererOptions: {
              fadeFoldWidgets: true,
              showPrintMargin: false
            }
          }" ng-model="newSecret.data.privateKey" class="create-secret-editor ace-bordered" id="private-key-editor" required></div>
          <div class="help-block">
            Private SSH key file for Git authentication.
          </div>
        </div>
      </div>

      <div ng-if="newSecret.type === 'source'">
        <div class="form-group">
          <div class="checkbox">
            <label>
              <input type="checkbox" ng-model="add.gitconfig">
              Use a custom .gitconfig file
            </label>
          </div>
        </div>

        <div class="form-group" ng-if="add.gitconfig" id="gitconfig">
          <label class="required" for="gitconfig">Git Configuration File</label>
          <osc-file-input
            id="gitconfig-file-input"
            model="newSecret.data.gitconfig"
            drop-zone-id="gitconfig"
            help-text="Upload your .gitconfig or  file."
            required="true"></osc-file-input>
          <div ui-ace="{
            mode: 'ini',
            theme: 'eclipse',
            rendererOptions: {
              fadeFoldWidgets: true,
              showPrintMargin: false
            }
          }" ng-model="newSecret.data.gitconfig" class="create-secret-editor ace-bordered" id="gitconfig-editor" required></div>
        </div>
      </div>

      <div ng-if="newSecret.authType === 'kubernetes.io/dockerconfigjson'">
        <div class="form-group" ng-class="{ 'has-error' : secretForm.dockerServer.$invalid && secretForm.dockerServer.$touched }">
          <label for="docker-server" class="required">Image Registry Server Address</label>
          <div>
            <input class="form-control"
              id="docker-server"
              name="dockerServer"
              ng-model="newSecret.data.dockerServer"
              type="text"
              autocorrect="off"
              autocapitalize="none"
              spellcheck="false"
              required>
          </div>
        </div>
        <div ng-show="secretForm.dockerServer.$error.required && secretForm.dockerServer.$touched" class="has-error">
          <div class="help-block">
            Image registry server address is required.
          </div>
        </div>

        <div class="form-group" ng-class="{ 'has-error' : secretForm.dockerUsername.$invalid && secretForm.dockerUsername.$touched }">
          <label for="docker-username" class="required">Username</label>
          <div>
            <input class="form-control"
              id="docker-username"
              name="dockerUsername"
              ng-model="newSecret.data.dockerUsername"
              type="text"
              autocorrect="off"
              autocapitalize="none"
              spellcheck="false"
              required>
          </div>
        </div>
        <div ng-show="secretForm.dockerUsername.$error.required && secretForm.dockerUsername.$touched" class="has-error">
          <div class="help-block">
            Username is required.
          </div>
        </div>

        <div class="form-group" ng-class="{ 'has-error' : secretForm.dockerPassword.$invalid && secretForm.dockerPassword.$touched }">
          <label for="docker-password" class="required">Password</label>
          <div>
            <input class="form-control"
              id="docker-password"
              name="dockerPassword"
              ng-model="newSecret.data.dockerPassword"
              type="password"
              autocorrect="off"
              autocapitalize="none"
              spellcheck="false"
              required>
          </div>
        </div>
        <div ng-show="secretForm.dockerPassword.$error.required && secretForm.dockerPassword.$touched" class="has-error">
          <div class="help-block">
            Password is required.
          </div>
        </div>
        <div class="form-group" ng-class="{ 'has-error' : secretForm.dockerEmail.$invalid && secretForm.dockerEmail.$touched }">
          <label for="docker-email" class="required">Email</label>
          <div>
            <input class="form-control"
              type="email"
              id="docker-email"
              name="dockerEmail"
              ng-model="newSecret.data.dockerMail"
              autocorrect="off"
              autocapitalize="none"
              spellcheck="false"
              required>
          </div>
        </div>
        <div class="has-error" ng-show="secretForm.dockerEmail.$invalid">
          <div ng-show="secretForm.dockerEmail.$error.email && secretForm.dockerEmail.$touched" class="help-block">
            Email must be in the form of <var>user@domain</var>.
          </div>
          <div ng-show="secretForm.dockerEmail.$error.required && secretForm.dockerEmail.$touched" class="help-block">
            Email is required.
          </div>
        </div>
      </div>

      <div ng-if="newSecret.authType === 'kubernetes.io/dockercfg'">
        <div class="form-group" id="docker-config">
          <label for="dockerConfig" class="required">Configuration File</label>
          <osc-file-input
            id="dockercfg-file-input"
            model="newSecret.data.dockerConfig"
            drop-zone-id="docker-config"
            help-text="Upload a .dockercfg or .docker/config.json file"
            required="true"></osc-file-input>
          <div ui-ace="{
            mode: 'json',
            theme: 'eclipse',
            onChange: aceChanged,
            rendererOptions: {
              fadeFoldWidgets: true,
              showPrintMargin: false
            }
          }" ng-model="newSecret.data.dockerConfig" class="create-secret-editor ace-bordered" id="dockerconfig-editor" required></div>
          <div class="help-block">
            File with credentials and other configuration for connecting to a secured image registry.
          </div>
          <div class="has-warning" ng-show="invalidConfigFormat">
            <span class="help-block">
              Configuration file should be in JSON format.
            </span>
          </div>
        </div>
      </div>
      <div ng-if="(serviceAccountsVersion | canI : 'update') && !serviceAccountToLink">
        <div class="form-group">
          <div class="checkbox">
            <label>
              <input type="checkbox" ng-model="newSecret.linkSecret">
              Link secret to a service account.
              <a href="{{'managing_secrets' | helpLink}}" target="_blank"><span class="learn-more-inline">Learn More&nbsp;<i class="fa fa-external-link" aria-hidden="true"></i></span></a>
            </label>
          </div>
        </div>

        <div ng-if="newSecret.linkSecret">
          <div class="form-group">
            <label class="required">Service Account</label>
            <ui-select required ng-model="newSecret.pickedServiceAccountToLink">
              <ui-select-match placeholder="Service Account Name">{{$select.selected}}</ui-select-match>
              <ui-select-choices repeat="sa in (serviceAccountsNames | filter : $select.search)">
                <div ng-bind-html="sa | highlight : $select.search"></div>
              </ui-select-choices>
            </ui-select>
          </div>
        </div>
      </div>
    </div>
    <div ng-if="newSecret.type === 'generic'">
      <edit-config-map-or-secret
        model="newSecret.data.genericKeyValues"
        type="secret"
        read-as-binary-string="true">
      </edit-config-map-or-secret>
    </div>
  </div>
  <div class="buttons gutter-top-bottom">
    <button class="btn btn-primary"
            type="button"
            ng-disabled="secretForm.$invalid || secretForm.$pristine || invalidConfigFormat"
            ng-click="create()">Create</button>
    <button class="btn btn-default"
            type="button"
            ng-click="cancel()">Cancel</button>
  </div>
</ng-form>
